<template>
  <el-dialog
      title=""
      :visible.sync="visible"
      width="60%"
      center
      :close-on-click-modal="false"
  >
    <!--      :style="{ 'max-height': '80vh', 'overflow-y': 'auto' }"-->

    <div class="FormsDiv">

      <el-form :model="Form" :rules="rule" label-width="120px" class="demo-ruleForm" :span="24">
        <el-form-item label="角色名称" prop="role_name">
          <el-input v-model="Form.role_name" :disabled="true" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" :span="12">
          <treeselect v-model="menu_id" :options="options" :multiple="true" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('Form')">保存</el-button>
        </el-form-item>

      </el-form>
    </div>

  </el-dialog>
</template>


<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {roleMenu,getRoleMenu} from "@/api/api";
export default {
  name: "RoleMenu",
  components:{
    Treeselect
  },
  props:{
    //弹出窗口
    visibleChild: {
      type:Boolean,
      default:false
    },
    childForm:{
      type:Object,
      default(){
        return {
          role_id : -1,
          role_name:'',
        };
      }
    },
    tableTree:{
      type:Array,
      default(){
        return [];
      }
    },
  },
  data(){
    return {
      Form: this.childForm,
      rule:{},
      menu_id: [],
      options: []
    }
  },
  watch:{
    // 这样才能算得上动态监控,不然初始渲染的就会一直保留
    childForm:{
      // 监听数据发生变化的处理函数
      handler(newValue) {
        // console.log("newValue",newValue);
        this.Form = JSON.parse(JSON.stringify(newValue));
        getRoleMenu({role_id:this.Form.role_id}).then((res) =>{
          if (res.code === 200){
            // console.log('res',res);
           this.menu_id =  res.data.map(item => item.menu_id);
           // console.log(this.menu_id);
          }else {
            this.visible = false;
          }
        }).catch(error =>{
          this.visible = false;
          this.$message.error(error.message || 'Error');
        })


      },
      // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
      deep: true
    },
    tableTree:{
      // 监听数据发生变化的处理函数
      handler(newValue) {
        // 将父组件传递过来的树形结构重新加载
        this.options  =  JSON.parse(JSON.stringify(newValue));
        // console.log('op',this.options);
      },
      // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
      deep: true
    },

  },
  computed:{
    visible:{
      get(){
        return this.visibleChild;
      },
      set(newValue){
        this.$emit("update:visibleChild",newValue);
      }
    },
  },
  methods: {
    submitForm(){
      this.Form.menu_id = this.menu_id || 0 ;
      roleMenu(this.Form).then((res) =>{
        if (res.code === 200){
          this.$message.success('保存成功');
          this.$parent.menu();
        }
      }).catch(error =>{
        this.$message.error(error.message || 'Error');
      })
      //关闭弹窗
      this.visible = false;
    },
  },
}
</script>


<style scoped>

</style>